<template>
  <el-card>
    <div style="margin-bottom: 16px;">
      <el-button type="primary" @click="showDialog = true">新增时间段</el-button>
    </div>

    <el-table :data="timeSlots" style="width: 100%;" border>
      <el-table-column label="序号" prop="id" />
      <el-table-column label="开始时间" prop="startTime"  />
      <el-table-column label="结束时间" prop="endTime" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="toDeleteTimeSlot(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增时间段弹窗 -->
    <el-dialog v-model="showDialog" title="新增时间段" width="400px">
      <el-form :model="newSlot" label-width="100px">
        <el-form-item label="开始时间">
          <el-time-picker
              v-model="newSlot.startTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-time-picker
              v-model="newSlot.endTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="选择结束时间"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确认添加</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { getTimeSlots, createTimeSlot, deleteTimeSlot } from '@/apps/admin/utils/timeSlotApi'

const timeSlots = ref([])

const showDialog = ref(false)

const newSlot = ref({
  startTime: '',
  endTime: ''
})

const fetchTimeSlots = async () => {
  try {
    const res = await getTimeSlots()
    timeSlots.value = res.data
  } catch (err) {
    console.error(err)
    ElMessage.error('加载失败')
  }
}

const confirmAdd = async () => {
  if (!newSlot.value.startTime || !newSlot.value.endTime) {
    ElMessage.warning('请填写完整时间段')
    return
  }

  try {
    const res = await createTimeSlot(newSlot.value)
    if (res["code"] !== 200) {
      ElMessage.error(res["msg"])
      return;
    }
    //timeSlots.value.push(res.data)
    showDialog.value = false
    await fetchTimeSlots()
    ElMessage.success('添加成功')

    newSlot.value = {startTime: '', endTime: ''} // 清空表单

  } catch (err) {
    console.error(err)
    ElMessage.error('添加失败')
  }
}

const toDeleteTimeSlot = async (id) => {
  ElMessageBox.confirm(
      '删除时段后不能继续预约该时段, 但之前的预约仍然有效, 请确认在新增时段时不会和旧的预约时间重叠',
      '提示',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    try {
      const res = await deleteTimeSlot({
        id
      })
      if (res["code"] !== 200) {
        ElMessage.error(res["msg"])
      }
      // timeSlots.value = timeSlots.value.filter(item => item.id !== id)
      await fetchTimeSlots()
      ElMessage.success('删除成功')
    } catch (err) {
      console.error(err)
      ElMessage.error('删除失败')
    }
  })


}

onMounted(fetchTimeSlots)
</script>
